<template>
  <div v-show="visible" class="contentmenu" :style="styleObj">
    <div class="contentmenu__item" @click="deleteLayer">删除图层</div>
    <div class="contentmenu__item" name="singleSelect" @click="lockLayer">锁定图层</div>
    <div class="contentmenu__item" name="singleSelect" @click="noLockLayer">解除锁定</div>
    <div class="contentmenu__item" name="singleSelect" @click="istopLayer">置顶图层</div>
    <div class="contentmenu__item" name="singleSelect" @click="setlowLayer">置底图层</div>
    <div class="contentmenu__item" name="singleSelect" @click="moveupLayer">上移一层</div>
    <div class="contentmenu__item" name="singleSelect" @click="movedownLayer">下移一层</div>
  </div>
</template>

<script setup lang="ts">
import { watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

interface Props {
  styleObj: Record<string, any>
  visible: boolean
}

const props = defineProps<Props>()
const emit = defineEmits([
  'update:visible',
  'deletelayer',
  'lockLayer',
  'noLockLayer',
  'copylayer',
  'istopLayer',
  'setlowLayer',
  'moveupLayer',
  'movedownLayer'
])

// 监听 visible
watch(
  () => props.visible,
  (val) => {
    if (val) {
      document.body.addEventListener('click', closeMenu)
    } else {
      document.body.removeEventListener('click', closeMenu)
    }
  }
)

const closeMenu = () => {
  emit('update:visible', false)
}

const deleteLayer = () => {
  ElMessageBox.confirm('是否删除所选图层?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      emit('deletelayer')
      ElMessage({
        type: 'success',
        message: '删除成功!'
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除'
      })
    })
}

const lockLayer = () => {
  emit('lockLayer')
}
const noLockLayer = () => {
  emit('noLockLayer')
}

const istopLayer = () => {
  emit('istopLayer')
}
const setlowLayer = () => {
  emit('setlowLayer')
}
const moveupLayer = () => {
  emit('moveupLayer')
}
const movedownLayer = () => {
  emit('movedownLayer')
}
</script>

<style lang="scss" scoped>
.contentmenu {
  width: 160px;
  position: fixed;
  z-index: 99999;
  list-style: none;
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  padding: 0;
  background: #232324;
  color: #ffffffd1;

  .contentmenu__item {
    z-index: 10000;
    list-style: none;
    padding: 8px 12px;
    cursor: pointer;
    position: relative;
    font-size: 13px;
  }

  .iconfont {
    font-size: 12px;
  }
}
</style>
